<template>
  <view class="feed-container">
      <!-- 顶部标题 -->
      <view class="feed-header">
        <text class="header-title">发现灵感</text>
        
        <!-- 分类选项卡 -->
        <view class="feed-tabs">
          <view 
            class="tab-item" 
            :class="{ active: activeTab === 'all' }"
            @click="switchTab('all')"
          >
            全部
          </view>
          <view 
            class="tab-item" 
            :class="{ active: activeTab === 'artwork' }"
            @click="switchTab('artwork')"
          >
            作品
          </view>
          <view 
            class="tab-item" 
            :class="{ active: activeTab === 'album' }"
            @click="switchTab('album')"
          >
            专辑
          </view>
        </view>
      </view>
      
      <!-- 作品列表 -->
      <view class="feed-list">
        <!-- 使用计算属性过滤列表，避免v-if和v-for一起使用 -->
        <view 
          v-for="(item, index) in filteredList" 
          :key="index"
        >
          <!-- 作品卡片 -->
          <template v-if="item.type === 'artwork'">
            <view 
              class="feed-item" 
              @click="goToDetail(item.id)"
            >
              <view class="artwork-card">
              <!-- 图片对比区域 -->
              <view class="image-compare">
                <view class="original-image">
                  <image :src="item.originalUrl" mode="aspectFill"></image>
                  <text class="image-label">原图</text>
                </view>
                <view class="result-image">
                  <image :src="item.resultUrl" mode="aspectFill"></image>
                  <text class="image-label">AI风格</text>
                </view>
              </view>
              
              <!-- 作品信息 -->
              <view class="artwork-info">
                <!-- 作品标题 -->
                <view class="artwork-title">
                  <text class="title-text">{{ item.title }}</text>
                </view>
                
                <!-- 风格标签 -->
                <view class="style-tags">
                  <text class="tags-title">风格：</text>
                  <view class="tag-item" 
                    v-for="(tag, tagIndex) in item.tags" 
                    :key="tagIndex"
                    @click.stop="searchByStyle(tag)">
                    {{ tag }}
                  </view>
                </view>
                
                <!-- AI描述 -->
                <view class="ai-description">
                  <text class="description-title">AI描述：</text>
                  <text class="description-content">{{ item.description }}</text>
                </view>
                
                <view class="album-creator">
                  <image class="creator-avatar" :src="item.creatorAvatar"></image>
                  <text class="creator-name">{{ item.creatorName }}</text>
                </view>

                <!-- 创建时间 -->
                <view class="create-time">
                  {{ formatTime(item.createTime) }}
                </view>
                
                <!-- 互动区域 -->
                <view class="interaction-area">
                  <view class="like-btn" @click.stop="likeArtwork(item.id)">
                    <text class="iconfont icon-like" :class="{ active: item.isLiked }">❤️</text>
                    <text class="count">{{ item.likeCount }}</text>
                  </view>
                  <view class="comment-btn" @click.stop="showComments(item.id)">
                    <text class="iconfont icon-comment">💬</text>
                    <text class="count">{{ item.commentCount }}</text>
                  </view>
                  <view class="share-btn" @click.stop="shareArtwork(item.id)">
                    <text class="iconfont icon-share">📢</text>
                    <text class="count">分享</text>
                  </view>
                </view>
              </view>
            </view>
            </view>
          </template>
          
          <!-- 专辑卡片 -->
          <template v-if="item.type === 'album'">
            <view 
              class="album-item" 
              @click="goToAlbumDetail(item.id, $event)"
            >
              <view class="album-card">
                <!-- 专辑图片网格 -->
                <view class="album-grid">
                  <view class="album-grid-row">
                    <image 
                      v-if="item.images[0]" 
                      :src="item.images[0]" 
                      mode="aspectFill" 
                      class="album-grid-image large"
                    ></image>
                  </view>
                  <view class="album-grid-row">
                    <image 
                      v-if="item.images[1]" 
                      :src="item.images[1]" 
                      mode="aspectFill" 
                      class="album-grid-image small"
                    ></image>
                    <image 
                      v-if="item.images[2]" 
                      :src="item.images[2]" 
                      mode="aspectFill" 
                      class="album-grid-image small"
                    ></image>
                  </view>
                </view>
                
                <!-- 专辑信息 -->
                <view class="album-info">
                  <view class="album-title">
                    <text class="title-text">{{ item.title }}</text>
                    <text class="album-count">{{ item.imageCount }}张照片</text>
                  </view>
                  
                  <view class="album-description" v-if="item.description">
                    {{ item.description }}
                  </view>

                  <view class="album-creator">
                    <image class="creator-avatar" :src="item.creatorAvatar"></image>
                    <text class="creator-name">{{ item.creatorName }}</text>
                  </view>
                  
                  <view class="create-time">
                    {{ formatTime(item.createTime) }}
                  </view>
                  
                  <!-- 互动区域 -->
                  <view class="interaction-area">
                    <view class="like-btn" @click.stop="likeAlbum(item.id)">
                      <text class="iconfont icon-like" :class="{ active: item.isLiked }">❤️</text>
                      <text class="count">{{ item.likeCount }}</text>
                    </view>
                    <view class="comment-btn" @click.stop="showComments(item.id, 'album')">
                      <text class="iconfont icon-comment">💬</text>
                      <text class="count">{{ item.commentCount }}</text>
                    </view>
                    <view class="share-btn" @click.stop="shareAlbum(item.id)">
                      <text class="iconfont icon-share">📢</text>
                      <text class="count">分享</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMore">
          <text v-if="isLoading">加载中...</text>
          <text v-else @click="loadMore">加载更多</text>
        </view>
        <view class="no-more" v-else>
          <text>没有更多作品了</text>
        </view>
      </view>
      
      <!-- 评论弹窗 -->
      <view class="comment-popup" v-if="showCommentPopup">
        <view class="popup-mask" @click="hideComments"></view>
        <view class="popup-content">
          <view class="popup-header">
            <text class="popup-title">评论 ({{ comments.length }})</text>
            <text class="close-btn" @click="hideComments">×</text>
          </view>
          
          <scroll-view scroll-y class="comments-list">
            <view class="comment-item" v-for="(comment, index) in comments" :key="index">
              <view class="comment-user">
                <image class="user-avatar" :src="comment.avatar"></image>
                <text class="user-name">{{ comment.nickname || comment.username }}</text>
              </view>
              <view class="comment-content">
                {{ comment.content }}
              </view>
              <view class="comment-time">
                {{ formatTime(comment.createTime) }}
              </view>
            </view>
            <view class="no-comment" v-if="comments.length === 0">
              <text>暂无评论，快来发表第一条评论吧</text>
            </view>
          </scroll-view>
          
          <view class="comment-input">
            <input 
              type="text" 
              v-model="commentText" 
              placeholder="写下你的评论..." 
              confirm-type="send"
              @confirm="submitComment"
            />
            <button class="send-btn" @click="submitComment">发送</button>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import * as commonUtils from '@/utils/common.js';
  import api from '@/utils/api.js';
  
  export default {
    data() {
      return {
        // 作品列表
        feedList: [],
        // 专辑列表
        albumList: [],
        // 页码
        page: 1,
        // 每页数量
        pageSize: 10,
        // 是否有更多数据
        hasMore: true,
        // 是否正在加载
        isLoading: false,
        // 是否显示评论弹窗
        showCommentPopup: false,
        // 当前查看的作品ID
        currentArtworkId: null,
        // 当前查看的专辑ID
        currentAlbumId: null,
        // 评论列表
        comments: [],
        // 评论文本
        commentText: '',
        // 当前选中的标签
        activeTab: 'all'
      }
    },
    
    computed: {
      // 合并作品和专辑列表，并按时间排序
      combinedList() {
        // 处理作品列表，添加类型标识
        const artworks = this.feedList.map(item => ({
          ...item,
          type: 'artwork'
        }));
        
        // 处理专辑列表，添加类型标识
        const albums = this.albumList.map(item => ({
          ...item,
          type: 'album'
        }));
        
        // 合并两个列表
        const combined = [...artworks, ...albums];
        
        // 按创建时间降序排序
        return combined.sort((a, b) => {
          const timeA = new Date(a.createTime).getTime();
          const timeB = new Date(b.createTime).getTime();
          return timeB - timeA; // 降序排列，最新的在前面
        });
      },
      // 根据标签过滤列表
      filteredList() {
        return this.combinedList.filter(item => {
          return this.activeTab === 'all' || item.type === this.activeTab;
        });
      }
    },
    
    onLoad() {
      this.loadFeedList();
    },
    
    // 下拉刷新
    onPullDownRefresh() {
      this.page = 1;
      this.feedList = [];
      this.hasMore = true;
      this.loadFeedList(() => {
        uni.stopPullDownRefresh();
      });
    },
    
    // 触底加载更多
    onReachBottom() {
      if (this.hasMore && !this.isLoading) {
        this.loadMore();
      }
    },
    
    methods: {
      // 加载作品列表
      loadFeedList(callback) {
        this.isLoading = true;
        
        // 调用实际API
        api.feed.getFeedList({
          page: this.page,
          size: this.pageSize,
          sort: 'createTime,desc'
        }).then(res => {
          if (res && res.code === 200) {
            const list = res.data.list || [];
            
            // 格式化数据，确保与模板所需的字段匹配
            const formattedList = list.map(item => ({
              id: item.id,
              originalUrl: item.originalImage || '',
              resultUrl: item.resultImage || '',
              title: item.title || '未命名作品',
              tags: item.tags || [],
              description: item.description || '',
              createTime: item.createTime || new Date().toISOString(),
              likeCount: item.likeCount || 0,
              commentCount: item.commentCount || 0,
              isLiked: item.isLiked || false,
              creatorAvatar: item.user.avatar || '',
              creatorName: item.user.nickname || '',
              type: 'artwork' // 添加类型标识
            }));
            
            if (this.page === 1) {
              this.feedList = formattedList;
            } else {
              this.feedList = [...this.feedList, ...formattedList];
            }
            
            // 判断是否有更多数据
            this.hasMore = res.data.hasMore !== false;
          } else {
            uni.showToast({
              title: res?.message || '获取作品列表失败',
              icon: 'none'
            });
          }
          
          // 如果当前是全部分类，也加载专辑列表
          if (this.activeTab === 'all') {
            this.loadAlbumList();
          } else {
            this.isLoading = false;
            if (callback) callback();
          }
        }).catch(err => {
          uni.showToast({
            title: '获取作品列表失败: ' + (err.message || '未知错误'),
            icon: 'none'
          });
          this.isLoading = false;
          if (callback) callback();
        });
      },
      
      // 加载专辑列表
      loadAlbumList(callback) {
        // 调用实际API
        api.album.getAlbumList({
          page: this.page,
          size: this.pageSize,
          sort: 'createTime,desc'
        }).then(res => {
          if (res && res.code === 200) {
            const list = res.data.list || [];
            
            // 格式化数据，确保与模板所需的字段匹配
            const formattedList = list.map(item => ({
              id: item.id,
              title: item.title || '未命名专辑',
              images: item.images || [],
              imageCount: item.imageCount || (item.images ? item.images.length : 0),
              creatorAvatar: item.user.avatar || '',
              creatorName: item.user.nickname || '',
              description: item.description || '',
              createTime: item.createTime || new Date().toISOString(),
              likeCount: item.likeCount || 0,
              commentCount: item.commentCount || 0,
              isLiked: item.isLiked || false,
              type: 'album' // 添加类型标识
            }));
            
            if (this.page === 1) {
              this.albumList = formattedList;
            } else {
              this.albumList = [...this.albumList, ...formattedList];
            }
            
            // 判断是否有更多数据
            this.hasMore = res.data.hasMore !== false;
          } else {
            uni.showToast({
              title: res?.message || '获取专辑列表失败',
              icon: 'none'
            });
          }
          
          this.isLoading = false;
          if (callback) callback();
        }).catch(err => {
          console.error('获取专辑列表失败:', err);
          uni.showToast({
            title: '获取专辑列表失败: ' + (err.message || '未知错误'),
            icon: 'none'
          });
          this.isLoading = false;
          if (callback) callback();
        });
      },
      
      // 加载更多
      loadMore() {
        if (this.isLoading) return;
        this.page++;
        this.loadFeedList();
      },
      
      // 格式化时间
      formatTime(time) {
        return commonUtils.formatDateTime(time);
      },
      
      // 跳转到详情页
      goToDetail(id) {
        uni.navigateTo({
          url: `/pages/detail/detail?id=${id}`
        });
      },
      
      // 跳转到专辑详情页
      goToAlbumDetail(id, event) {
        uni.navigateTo({
          url: `/pages/album-detail/album-detail?id=${id}`
        });
      },
      
      // 点赞作品
      likeArtwork(id) {
        const index = this.feedList.findIndex(item => item.id === id);
        if (index === -1) return;
        
        const item = this.feedList[index];
        
        // 调用实际API
        api.feed.interact({
          targetId: id,
          type: 'like'
        }).then(res => {
          if (res && res.code === 200) {
            // 更新状态
            if (item.isLiked) {
              item.likeCount = Math.max(0, item.likeCount - 1);
            } else {
              item.likeCount++;
            }
            item.isLiked = !item.isLiked;
            
            // 更新列表
            this.feedList.splice(index, 1, item);
            
            uni.showToast({
              title: item.isLiked ? '点赞成功' : '取消点赞',
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: res?.message || '操作失败',
              icon: 'none'
            });
          }
        }).catch(err => {
          uni.showToast({
            title: (err.message || '未知错误'),
            icon: 'none'
          });
        });
      },
      
      // 点赞专辑
      likeAlbum(id) {
        const index = this.albumList.findIndex(item => item.id === id);
        if (index === -1) return;
        
        const item = this.albumList[index];
        
        // 调用实际API
        api.album.interact({
          targetId: id,
          type: 'like'
        }).then(res => {
          if (res && res.code === 200) {
            // 更新状态
            if (item.isLiked) {
              item.likeCount = Math.max(0, item.likeCount - 1);
            } else {
              item.likeCount++;
            }
            item.isLiked = !item.isLiked;
            
            // 更新列表
            this.albumList.splice(index, 1, item);
            
            uni.showToast({
              title: item.isLiked ? '点赞成功' : '取消点赞',
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: res?.message || '操作失败',
              icon: 'none'
            });
          }
        }).catch(err => {
          uni.showToast({
            title: (err.message || '未知错误'),
            icon: 'none'
          });
        });
      },
      
      // 显示评论
      showComments(id, type) {
        if (type === 'album') {
          this.currentAlbumId = id;
          this.currentArtworkId = null;
        } else {
          this.currentArtworkId = id;
          this.currentAlbumId = null;
        }
        
        this.showCommentPopup = true;
        this.loadComments();
      },
      
      // 加载评论
      loadComments() {
        const api_method = this.currentAlbumId ? api.album.getComments : api.feed.getComments;
        
        api_method(this.currentAlbumId || this.currentArtworkId, {
          page: 1,
          size: 20,
          sort: 'createTime,desc'
        }).then(res => {
          if (res && res.code === 200) {
            this.comments = res.data.list || [];
          } else {
            uni.showToast({
              title: res?.message || '获取评论失败',
              icon: 'none'
            });
          }
        }).catch(err => {
          uni.showToast({
            title: '获取评论失败: ' + (err.message || '未知错误'),
            icon: 'none'
          });
        });
      },
      
      // 隐藏评论
      hideComments() {
        this.showCommentPopup = false;
        this.commentText = '';
      },
      
      // 提交评论
      submitComment() {
        if (!this.commentText.trim()) {
          uni.showToast({
            title: '评论内容不能为空',
            icon: 'none'
          });
          return;
        }
        
        const targetId = this.currentAlbumId || this.currentArtworkId;
        const type = this.currentAlbumId ? 'album' : 'artwork';
        const api_method = type === 'album' ? api.album.interact : api.feed.interact;
        
        api_method({
          targetId: targetId,
          type: 'comment',
          content: this.commentText
        }).then(res => {
          if (res && res.code === 200) {
        
            // 添加新评论到列表顶部
            const newComment = {
              id: res.data.id || Date.now(),
              content: this.commentText,
              createTime: new Date().toISOString(),
              // 将user对象中的属性直接添加到评论对象中，与模板匹配
              avatar: res.data.avatar || '',
              nickname: res.data.nickname || '我',
              userId: res.data.userId || 0
            };
            
            this.comments.unshift(newComment);
            
            // 清空输入框
            this.commentText = '';
            
            // 更新评论数
            if (type === 'album') {
              const index = this.albumList.findIndex(item => item.id === targetId);
              if (index !== -1) {
                const item = this.albumList[index];
                item.commentCount++;
                this.albumList.splice(index, 1, item);
              }
            } else {
              const index = this.feedList.findIndex(item => item.id === targetId);
              if (index !== -1) {
                const item = this.feedList[index];
                item.commentCount++;
                this.feedList.splice(index, 1, item);
              }
            }
            
            uni.showToast({
              title: '评论成功',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: res?.message || '评论失败',
              icon: 'none'
            });
          }
        }).catch(err => {
          uni.showToast({
            title: '评论失败: ' + (err.message || '未知错误'),
            icon: 'none'
          });
        });
      },
      
      // 分享作品
      shareArtwork(id) {
        uni.showToast({
          title: '生成分享海报中...',
          icon: 'none'
        });
        
        // 调用实际API
        api.feed.generateSharePoster({
          artworkId: id
        }).then(res => {
          if (res && res.code === 200 && res.data) {
            // 预览海报
            uni.previewImage({
              urls: [res.data]
            });
          } else {
            uni.showToast({
              title: res?.message || '生成海报失败',
              icon: 'none'
            });
          }
        }).catch(err => {
          uni.showToast({
            title: '生成海报失败: ' + (err.message || '未知错误'),
            icon: 'none'
          });
        });
      },
      
      // 分享专辑
      shareAlbum(id) {
        uni.showToast({
          title: '分享功能开发中',
          icon: 'none'
        });
      },
      
      // 切换标签
      switchTab(tab) {
        this.activeTab = tab;
      },
      
      // 查询相应风格
      searchByStyle(style) {
        // 显示加载提示
        uni.showLoading({
          title: '搜索中...'
        });
        
        // 调用API获取风格列表
        api.style.getAllStyles({
          page: 1,
          size: 10,
          keyword: style
        }).then(res => {
          if (res && res.code === 200 && res.data && res.data.list && res.data.list.length > 0) {
            // 获取第一个匹配的风格ID
            const styleId = res.data.list[0].id;
            
            // 根据风格ID获取相关作品
            return api.style.getStyleWorks(styleId, {
              page: 1,
              size: 20,
              sort: 'createTime,desc'
            });
          } else {
            // 如果没有找到匹配的风格，尝试使用标签搜索
            return api.feed.getFeedList({
              page: 1,
              size: 20,
              keyword: style,
              sort: 'createTime,desc'
            });
          }
        }).then(res => {
          uni.hideLoading();
          
          if (res && res.code === 200 && res.data && res.data.list) {
            const list = res.data.list || [];
            
            if (list.length > 0) {
              // 更新作品列表
              this.page = 1;
              
              // 格式化数据，确保与模板所需的字段匹配
              const formattedList = list.map(item => ({
                id: item.id,
                originalUrl: item.originalImage || '',
                resultUrl: item.resultImage || '',
                title: item.title || '未命名作品',
                tags: item.tags || [],
                description: item.description || '',
                createTime: item.createTime || new Date().toISOString(),
                likeCount: item.likeCount || 0,
                commentCount: item.commentCount || 0,
                creatorAvatar: item.user.avatar || '',
                creatorName: item.user.nickname || '',
                isLiked: item.isLiked || false,
                type: 'artwork' // 添加类型标识
              }));
              
              this.feedList = formattedList;
              this.hasMore = res.data.hasMore !== false;
              
              // 显示搜索结果提示
              uni.showToast({
                title: `已找到${list.length}个相关作品`,
                icon: 'none'
              });
            } else {
              // 没有找到相关作品
              uni.showToast({
                title: `未找到风格"${style}"的相关作品`,
                icon: 'none'
              });
            }
          } else {
            uni.showToast({
              title: '搜索失败，请稍后再试',
              icon: 'none'
            });
          }
        }).catch(err => {
          uni.hideLoading();
          uni.showToast({
            title: '搜索失败: ' + (err.message || '未知错误'),
            icon: 'none'
          });
        });
      }
    }
  }
  </script>
  
  <style>
  .feed-container {
    padding-bottom: 30rpx;
  }
  
  /* 顶部标题 */
  .feed-header {
    padding: 30rpx;
    text-align: center;
  }
  
  .header-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
  
  /* 分类选项卡 */
  .feed-tabs {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
  }
  
  .tab-item {
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 20rpx;
    border-bottom: 2rpx solid transparent;
  }
  
  .tab-item.active {
    color: #333;
    border-bottom-color: #333;
  }
  
  /* 作品列表 */
  .feed-list {
    padding: 0 20rpx;
  }
  
  .feed-item {
    margin-bottom: 40rpx;
  }
  
  .artwork-card {
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  
  /* 图片对比区域 */
  .image-compare {
    display: flex;
    height: 400rpx;
  }
  
  .original-image, .result-image {
    flex: 1;
    position: relative;
  }
  
  .original-image image, .result-image image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .image-label {
    position: absolute;
    bottom: 10rpx;
    left: 10rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24rpx;
    padding: 6rpx 12rpx;
    border-radius: 20rpx;
  }
  
  /* 作品信息 */
  .artwork-info {
    padding: 20rpx;
  }
  
  /* 作品标题 */
  .artwork-title {
    margin-bottom: 15rpx;
  }
  
  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  /* 风格标签 */
  .style-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10rpx;
  }
  
  .tags-title {
    font-size: 28rpx;
    color: #666;
    margin-right: 10rpx;
  }
  
  .tag-item {
    font-size: 24rpx;
    color: #FF69B4;
    background-color: rgba(255, 105, 180, 0.1);
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    margin-right: 12rpx;
    margin-bottom: 10rpx;
    border: 1rpx solid rgba(255, 105, 180, 0.3);
    transition: all 0.3s;
  }
  
  .tag-item:active {
    background-color: rgba(255, 105, 180, 0.3);
    transform: scale(0.95);
  }
  
  /* AI描述 */
  .ai-description {
    margin-bottom: 15rpx;
  }
  
  .description-title {
    font-size: 26rpx;
    color: #666;
  }
  
  .description-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
  }
  
  /* 创建时间 */
  .create-time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 15rpx;
  }
  
  /* 互动区域 */
  .interaction-area {
    display: flex;
    border-top: 1rpx solid #f5f5f5;
    padding-top: 15rpx;
  }
  
  .like-btn, .comment-btn, .share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
  }
  
  .iconfont {
    margin-right: 10rpx;
    font-size: 32rpx;
  }
  
  .iconfont.active {
    color: #FF69B4;
  }
  
  .count {
    font-size: 26rpx;
  }
  
  /* 加载更多 */
  .load-more, .no-more {
    text-align: center;
    padding: 30rpx 0;
    color: #999;
    font-size: 28rpx;
  }
  
  /* 专辑卡片 */
  .album-item {
    margin-bottom: 40rpx;
  }
  
  .album-card {
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  
  /* 专辑图片网格 */
  .album-grid {
    display: flex;
    flex-direction: column;
  }
  
  .album-grid-row {
    display: flex;
  }
  
  .album-grid-image {
    width: 100%;
    height: 200rpx;
    object-fit: cover;
  }
  
  .album-grid-image.large {
    height: 400rpx;
  }
  
  .album-grid-image.small {
    width: 50%;
    height: 200rpx;
  }
  
  /* 专辑信息 */
  .album-info {
    padding: 20rpx;
  }
  
  .album-title {
    margin-bottom: 15rpx;
  }
  
  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .album-count {
    font-size: 24rpx;
    color: #999;
    margin-left: 10rpx;
  }
  
  .album-creator {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .creator-avatar {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }
  
  .creator-name {
    font-size: 28rpx;
    color: #333;
  }
  
  .album-description {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15rpx;
  }
  
  /* 评论弹窗 */
  .comment-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
  
  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .popup-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    /* 确保弹窗内容有固定的结构 */
    height: 70vh;
  }
  
  .popup-header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #f5f5f5;
  }
  
  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .close-btn {
    font-size: 40rpx;
    color: #999;
  }
  
  .comments-list {
    flex: 1;
    padding: 0 30rpx;
    /* 设置滚动区域的高度，确保其不会挤占输入框的空间 */
    overflow-y: auto;
    /* 限制最大高度，留出足够空间给输入框 */
    max-height: calc(70vh - 130rpx - 120rpx);
  }
  
  .comment-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
  }
  
  .comment-user {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .user-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 15rpx;
  }
  
  .user-name {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
  
  .comment-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 10rpx;
  }
  
  .comment-time {
    font-size: 24rpx;
    color: #999;
  }
  
  .no-comment {
    padding: 40rpx 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
  }
  
  .comment-input {
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #f5f5f5;
    /* 确保输入框始终保持在底部可见 */
    position: relative;
    background-color: #fff;
    min-height: 120rpx;
    box-sizing: border-box;
  }
  
  .comment-input input {
    flex: 1;
    height: 70rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
  }
  
  .send-btn {
    margin-left: 20rpx;
    background-color: #FF69B4;
    color: #fff;
    font-size: 28rpx;
    padding: 0 30rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 35rpx;
  }
  </style>